<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.goHome()" href="javascript:void(0)"
          ><img class="back-btn" src="../../../../static/images/back.png"
        /></a>
        <div class="header-search flex-center">党费缴纳</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper record-member-lists">
        <div class="mui-scroll paddingBottom">
          <!-- -----未缴费显示内容 start-->
          <div v-if="userData.needPaySum > 0" class="people-header">
            <p class="schedule-item-world">
              {{ userName }}，你好！党费缴纳截止日期为本月{{
                userData.endTime
              }}日，还剩<span class="mine-lists-money">{{
                userData.remainDays || 0
              }}</span
              >天
            </p>
            <div
              class="flex-justify-start mine-header-info schedule-item-world"
            >
              本月剩余应缴党费：
              <h3 class="mine-lists-money">￥{{ userData.needPaySum }}</h3>
            </div>
            <div class="statistics-lists group-study message-details">
              <div
                v-if="getPay() > 0"
                class="sign-end-btn"
                @click="thisMonthOnlinePayment()"
              >
                立即缴费
              </div>
            </div>
          </div>
          <!-- --------未缴费显示内容 end-->

          <!-- -----已缴费显示内容 start-->
          <div v-if="userData.needPaySum <= 0" class="people-header">
            <p class="schedule-item-world">{{ userName }}，你好!</p>
            <h3 class="already-payment">本月党费已缴纳，请继续保持！</h3>
            <p
              v-if="false"
              class="history-payment"
              onclick="window.location.href='payment-record.html'"
            >
              还有3次历史待缴党费记录，点击查看>
            </p>
          </div>
          <!-- -----已缴费显示内容 end-->
          <h4 class="work-message-lists">党费缴纳历史记录</h4>
          <div class="history-message flex-center">
            <div class="message-line"></div>
            <div
              @click="showTimePicker()"
              id="recordYyear"
              class="year-btn flex-center"
            >
              <span id="recordTimes">{{ year }}</span
              >年
              <img
                class="arrow_icon"
                src="../../../../static/images/select_down.png"
              />
            </div>
            <div class="message-line"></div>
          </div>
          <div class="mui-table-view organization-lists">
            <div class="mui-table-view organization-lists">
              <div class="mui-table-view organization-lists">
                <div class="organization-lists pay-scroll">
                  <cube-scroll
                    ref="scroll"
                    :options="options"
                    @pulling-up="onPullingUp"
                  >
                    <cube-swipe>
                      <transition-group name="swipe" tag="div">
                        <div
                          class="mui-table-view-cell"
                          v-for="(data, index) in swipeData"
                          :key="data.month"
                        >
                          <li class="mui-table-view-cell">
                            <div class="flex-between-center">
                              <p>{{ data.month }}月</p>
                              <p v-if="data.shouldPay === data.realPay">
                                已缴费
                              </p>
                              <p
                                v-if="data.shouldPay > data.realPay"
                                class="mine-lists-money"
                              >
                                待缴费
                              </p>
                            </div>
                            <div
                              class="schedule-item-world flex-between-center"
                            >
                              <p
                                class="organization-lists-title mine-lists-content"
                              >
                                应缴党费：￥{{ data.shouldPay }}，实缴党费：￥{{
                                  data.realPay
                                }}
                              </p>
                              <div
                                v-if="data.shouldPay > data.realPay"
                                class="red-btn"
                                @click="goOnlinePayment(data)"
                              >
                                去缴费
                              </div>
                            </div>
                          </li>
                        </div>
                      </transition-group>
                    </cube-swipe>
                    <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                      <img src="../../../../static/images/no_data.png" alt="">
                      <p>暂无数据</p>
                    </div> -->
                    <!-- W noData -->
                    <noData v-if="swipeData.length === 0"></noData>
                    <onBottom v-else-if="onBottom"></onBottom>
                  </cube-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <paymentFooterbar></paymentFooterbar>
  </div>
</template>

<script>
import paymentFooterbar from "../common/paymentFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
// import moment from 'moment'
export default {
  components: {
    paymentFooterbar,
  },
  name: "payment",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      payStatus: null,
      year: new Date().getFullYear(),
      thisYear: new Date().getFullYear(),
      thisMonth: (new Date().getMonth() + 1 + "").padStart(2, "0"),
      userName: "",
      shouldPay: 0,
      realPay: 0,
      userData: {},
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      let userInfo = this.$store.state.userInfo || {};
      this.userName = userInfo.fullname;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: 20,
        partyMemberId: userInfo.partyMemberModel.id,
        payStatus: this.payStatus,
        year: this.year,
      };
      loginService.getUserPayDetail(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        // 计算本月还剩多少党费需缴纳
        if (
          this.year === this.thisYear &&
          this.swipeData &&
          this.swipeData.length > 0
        ) {
          this.swipeData.map((data) => {
            if (data.month === this.thisMonth) {
              this.shouldPay = data.shouldPay;
              this.realPay = data.realPay;
            }
          });
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });

      let _time = new Date(new Date().getFullYear(), 1, 1);
      let yearMonth = moment(_time).format("YYYY-MM");
      let userData = {
        partyMemberId: userInfo.partyMemberModel.id,
        yearMonth: yearMonth,
      };
      loginService.getChargeEndTime(userData).then((res) => {
        if (res.code !== 200) {
          return tools.tip("获取数据失败");
        }
        this.userData = res.data;
      });
    },
    showTimePicker() {
      if (!this.datePicker) {
        let me = this;
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 1,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(me.year, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = new Date(selectedTime).getFullYear();
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: new Date(this.year, 1, 1),
        });
      }, 1000);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.loadData();
    },
    getPay() {
      if (this.swipeData && this.swipeData.length > 0) {
        let data = this.swipeData[0];
        return data.shouldPay - data.realPay;
      } else {
        return 0;
      }
    },
    goOnlinePayment(data) {
      this.$store.state.onlinePayment = data;
      this.$router.push({ path: `/onlinePayment` });
    },
    thisMonthOnlinePayment() {
      let data = {
        year: this.year,
        month: this.thisMonth,
        realPay: this.realPay,
        shouldPay: this.shouldPay,
      };
      this.goOnlinePayment(data);
    },
  },
};
</script>

<style scoped>
.pay-scroll {
  height: calc(100vh - 313px);
}
.mui-table-view:after,
.mui-table-view-cell:after {
  background: none;
}
</style>
